import {
  Meta,
  Preview,
  Story,
  ArgsTable,
  IconGallery,
  IconItem
} from '@storybook/addon-docs/blocks';

import '../../src/icons/icons.scss';
import iconsList from './iconsList';

<Meta
  title="Core/Icons"
  argTypes={{
    icon: {
      options: iconsList,
      control: { type: 'select' }
    },
    size: {
      control: { type: 'range', min: 8, max: 320 }
    },
    color: {
      control: { type: 'color' }
    }
  }}
/>

# Icon

Use a class to apply an icon to an element

<IconGallery>
  {iconsList.map((iconName, index) => (
    <IconItem key={iconName} name={iconName}>
      <span
        class={iconName}
        style={{ fontSize: '32px', color: 'var(--color-primary-black)' }}
      />
    </IconItem>
  ))}
</IconGallery>

## Playground

export const Template = args => ({
  setup() {
    return { args };
  },
  template: `
    <span
      :class="args.icon"
      :style="{
        fontSize: args.size + 'px',
        color: args.color,
      }"
    />
  `
});

<Preview>
  <Story
    name="Playground"
    args={{
      icon: 'q-icon-bell',
      size: '56',
      color: '#1d1c1a'
    }}
  >
    {Template.bind({})}
  </Story>
</Preview>

<ArgsTable story="Playground" />
